<template>
    <div id="home">
        <el-container class="page-container">
            <el-header>
                <HomeHeader></HomeHeader>
            </el-header>
            <el-container>
                <!-- 68px  -->
                <el-aside width="200px">
                    <!-- 主页的左侧导航栏 -->
                    <AsideMenu></AsideMenu>
                </el-aside>
                <el-main>
                    <HomeBreadcrumb></HomeBreadcrumb>
                    <RouterView></RouterView>
                    <!-- <ChinaCharts></ChinaCharts> -->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import AsideMenu from '../components/home/AsideMenu.vue'
import HomeHeader from '../components/home/HomeHeader.vue'
import HomeBreadcrumb from '../components/home/HomeBreadcrumb.vue'
// import ChinaCharts from '../components/chart/ChinaCharts.vue';
// const roleId = sessionStorage.getItem('roleId')
</script>

<style scoped lang="scss">
//lang="scss"支持css嵌套
#home {
    width: 100%;
    height: 100%;

    // background-color:#b6f499;
    .page-container {
        width: 100%;
        height: 100%;
        // background-color:#b6f499;

        .el-main {
            //body首页位置
            background-color: rgb(160, 212, 171);
            padding: 5px;
            
        }

        .el-header {
            //头部位置
            height: 80px;
            background-color: #6ab5a0;
        }

        .el-aside {
            //左侧边（不包括下拉菜单）
            background-color: #000000;
            width: 200px;
        }
    }
}
</style>
